<!-- @format -->

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"
  />
  <title>大学习截图</title>
  <!-- 引入 FrozenUI -->
  <link
    rel="stylesheet"
    href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"
  />
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link rel="icon" href="data:;base64,=" />
  <script type="text/javascript">
    function formSubmit() {
      var form = document.getElementById("myForm");
      if (form.name.value == "") {
        alert("用户名不能为空！");
        form.name.focus();
        return false;
      }

      var btn = document.getElementById("btn");
      btn.innerHTML = "提交中";
      btn.disabled = true;
      action = form.action;
      classnum = document.getElementById("classnum").innerHTML;
      form.action = action + "/" + classnum;
      form.submit();
    }

    $(document).ready(function () {
      $("#file1").on("change", "input[type='file']", function () {
        var filePath = $(this).val();
        if (
          filePath.indexOf("jpg") != -1 ||
          filePath.indexOf("png") != -1 ||
          filePath.indexOf("PNG") != -1 ||
          filePath.indexOf("JPG") != -1
        ) {
          $(".fileerrorTip").html("").hide();
          var arr = filePath.split("\\");
          var fileName = arr[arr.length - 1];
          $(".showFileName").html(fileName);
        } else {
          $(".showFileName").html("");
          $(".fileerrorTip")
            .html("您未上传文件，或者您上传文件类型有误！")
            .show();
          return false;
        }
      });
      $("#file2").on("change", "input[type='file']", function () {
        var filePath = $(this).val();
        if (
          filePath.indexOf("jpg") != -1 ||
          filePath.indexOf("png") != -1 ||
          filePath.indexOf("PNG") != -1 ||
          filePath.indexOf("JPG") != -1
        ) {
          $(".fileerrorTip2").html("").hide();
          var arr = filePath.split("\\");
          var fileName = arr[arr.length - 1];
          $(".showFileName2").html(fileName);
        } else {
          $(".showFileName2").html("");
          $(".fileerrorTip2")
            .html("您未上传文件，或者您上传文件类型有误！")
            .show();
          return false;
        }
      });
    });
  </script>
</head>
<body>
  <h1 class="title"><i id="classnum">{{.class}}</i>青年大学习截图</h1>
  <div class="ui-form ui-border-t">
    <form
      id="myForm"
      action="/upload"
      method="post"
      enctype="multipart/form-data"
    >
      <div class="ui-form-item ui-border-b">
        <label>
          姓名
        </label>
        <input
          type="text"
          name="name"
          id="name"
          placeholder="请输入您的姓名！"
          required="required"
          maxlength="3"
        />
      </div>

      <div class="ui-form-item ui-border-b">
        <label>
          图一
        </label>
        <a class="file" id="file1">
          选择文件
          <input type="file" name="file" required="required" />
        </a>
        <label class="showFileName"></label>
        <label class="fileerrorTip">未选择文件</label>
      </div>

      <div class="ui-form-item ui-border-b">
        <label>
          图二
        </label>
        <a class="file" id="file2">
          选择文件
          <input type="file" name="file" required="required" />
        </a>
        <label class="showFileName2"></label>
        <label class="fileerrorTip2">未选择文件</label>
      </div>
    </form>
    <div class="ui-btn-wrap">
      <button id="btn" class="ui-btn-lg ui-btn-primary" onclick="formSubmit()">
        提交
      </button>
    </div>
  </div>
  <div class="author">---项目作者:hu QQ:1091740788---</div>
</body>
<style>
  h1 {
    width: 100%;
    text-align: center;
    font-size: 26px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #fff;
  }
  .file {
    position: relative;
    display: inline-block;
    background: #d0eeff;
    border: 1px solid #99d3f5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1e88c7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    margin: 8px 20px 0px 24px;
  }
  .file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file:hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
  }
  .author {
    margin-top: 12px;
    text-align: center;
    font-size: small;
    color: #999999;
  }
</style>
